<template>
  <div class="curriculum">

<!--    tab切换-->
    <div class="curriculumTabs">
      <div
        class="tabItmes flex-space-center"
        :class="{'activityCurriculum':curriculumTabsIndex == index }"
        v-for="(item,index) in curriculumTabList"
        :key="index" @click="choosedTab(index)">
        {{ item }}
      </div>
    </div>
<!--    筛选-->
    <div class="filters">
<!--      筛选列表-->
      <tabs :tabList="filterList" @goCenter="chooseThree"></tabs>
    </div>
<!--    课程视频列表-->
    <!--    下拉刷新-->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
        v-if="courseList&&courseList.length*1>0"
        v-model="loading"
        :finished="finished"
        :offset="20"
        :immediate-check="false"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="courseLists">
          <div class="courseList flex-space-between">
            <div class="courseListItems" v-for="(item,index) in courseList" :key="index" @click="exportVideoUrl(item)">
              <!--          视频-->
              <div class="courseVideo" :class="{'activityBorder':item.checked}" :style="{backgroundImage:'url('+item.img+')'}">
<!--               test_status 0未通过 1已通过-->
                <div v-if="item.test_status*1>0" class="pass flex-space-center">通过</div>
                <div class="time">{{item.time}}</div>
              </div>
              <!--          内容-->
              <div class="courseContent">
                <!--            标题-->
                <div :class="{'activityWord':item.checked}" class="title twoDot">
                  <!--              <span class="flex-space-center">新</span>-->
                  {{item.name}}
                </div>
                <!--            类型-->
                <div class="courseType flex-space-between">
                  <div :class="{'activityWord':item.checked}" v-html="item.desc"></div>
<!--                  status 状态0 未观看 1已观看 2已考试通过-->
                  <div v-if="item.status*1>0">已看完</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
      <div class="noData flex-space-center" v-else>
        敬请期待！
      </div>
    </van-pull-refresh>


<!--    弹框-->
    <van-popup v-model="filterListShow" round position="bottom" :style="{ height: '50%' }">
      <van-tree-select
        :items="filterThreeList"
        :active-id.sync="activeId"
        :main-active-index.sync="activeIndex"
        @click-item="choosedThreeItem"
      />
    </van-popup>
  </div>
</template>

<script>
  import tabs from '../../../components/tabs'
  import {GETLESSONCATETWO, GETLESSONCATETHREE, GETLESSONlIST, GETUNLESSONlIST} from "../../../apis/oldUniversity"

  export default {
    components:{
      tabs
    },
    data() {
      return {
        curriculumTabList: ['学历课程','非学历课程'],//学历课程分类
        curriculumTabsIndex:0,//学历课程分类下标
        filterList:[],//筛选列表
        courseList:[],//课程列表
        // 筛选弹框配置
        filterListShow:false,//筛选弹框
        filterThreeList:[],//三级筛选列表
        activeId: 0,//三级分类选中的id
        activeIndex: 0,//三级分类选中的下标
        // 上拉加载下拉刷新配置
        loading: false,//
        finished: false,//上拉加载完毕
        refreshing: false,//下拉刷新
        page:1,//分页页数
        pageSize:10,//每页数据

      }
    },
    mounted() {

    },
    methods:{
      // 初始化下拉加载
      loadingInit(){
        //清空课程列表 下拉加载初始化
        this.courseList = [];
        this.loading = false;
        this.finished = false;
        this.refreshing =false;
        this.page = 1;
        this.activeId = 0;//三级分类选中的id
      },
      // 切换tab 选择学历和非学历
      choosedTab(index){
        this.curriculumTabsIndex = index;//当前选中的学历tab下标
        //清空课程列表 下拉加载初始化
        this.loadingInit();
        // 获取课程列表
        this.getLessonList()
      },
      // 点击二级分类选择三级分类
      chooseThree(item){
        if(item.guid*1==0){
          // 初始化
          this.loadingInit()
          // 点击全部 获取全部视频列表
          this.getLessonList()
        }else{
          // 获取三级分类
          this.getLessonCateThree(item)
        }

      },
      // 选中3级分类
      choosedThreeItem(item){
        this.filterListShow = false;//弹框隐藏
        this.getLessonList(this.activeId);//筛选获取课程列表
      },
      // 导出视频路径
      exportVideoUrl(item){
        // 列表加默认不选中值
        this.courseList.map((item,index) => {
          this.$set(item,'checked',false)
        })
        // 当前点击的选中
        item.checked = true;
        this.$emit('exportVideoUrl',item,this.curriculumTabsIndex)
      },
      //-------------------------- 接口开始 --------------------
      // 获取课程二级分类
      getLessonCateTwo(){
        let getLessonCateTwo = GETLESSONCATETWO
        getLessonCateTwo().then( res => {
          if(res.data.code*1===200){
            this.filterList = res.data.data;//筛选列表
            var totalObj = {
              cate_id:0,
              name:"全部",
              level:2,
            }
            this.filterList.unshift(totalObj)
            this.filterList.forEach((item,index)=>{
              if(!item.guid){
                this.$set(item,'guid',index)
              }
            })//tab列表
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error => {
          console.log(error)
        })
      },
      // 获取课程三级分类
      getLessonCateThree(item){
        let getLessonCateThree = GETLESSONCATETHREE
        let params = {
          cate_id:item.cate_id
        }
        getLessonCateThree(params).then( res => {
          if(res.data.code*1===200){
            // 给三级列表赋值
            let threeList = []
            let threeObj = {}
            let newThreeList = []
            threeList = res.data.data
            threeList.forEach((item,index) => {
              threeObj = {
                text:item.name,
                id:item.cate_id
              }
              newThreeList.push(threeObj)
            })
            this.filterThreeList = [
              {
                text:item.name,
                children:newThreeList
              }
            ]

            this.filterListShow = true;//弹框显示
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error => {
          console.log(error)
        })
      },
      // 获取课程列表
      getLessonList(cate_id){
         // GETLESSONlIST 学历  GETUNLESSONlIST  非学历
        // this.curriculumTabsIndex 0 学历 1 非学历
        let getLessonList = this.curriculumTabsIndex*1<1?GETLESSONlIST:GETUNLESSONlIST
        let params = {
          cate_id:cate_id&&cate_id*1>0?cate_id:0,//三级分类ID 0全部课程 1对应分类id
          page:1,//
        }
        getLessonList(params).then( res => {
          if(res.data.code*1===200){
            // 下拉刷新
            if (this.refreshing) {
              this.courseList = [];
              this.refreshing = false;
            }
            // 关闭加载中
            this.loading = false;
            const courseList = res.data.data;//课程列表
            if(courseList == null || courseList.length*1 === 0){
              this.finished = true
              // return
            }
            if(courseList.length*1 < this.pageSize){
              this.finished = true
            }
            if(this.page*1 == 1){
              this.courseList = [];//清空数组
              this.courseList = courseList
            }else{
              this.courseList = this.courseList.concat(courseList)
            }

            // 列表加默认不选中值
            this.courseList.map((item,index) => {
              this.$set(item,'checked',false)
            })
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error => {
          console.log(error)
        })
      },
      // 上拉加载
      onLoad() {
        this.page++;
        this.getLessonList(this.activeId);//获取课程列表
      },
      // 下拉刷新
      onRefresh() {
        // 清空列表数据
        this.finished = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.page=1;
        this.getLessonList(this.activeId);//获取课程列表
      },
      // --------------------------接口结束---------------------
    },
    computed: {
    },
  }
</script>

<style lang="less" scoped>
  @import (reference) url(../../../assets/less/common);
  .curriculum{
    width:100%;
    .curriculumTabs{
      width:100%;
      height:0.86rem;
      display: flex;
      background:#232323;
      font-size:@fontSize34;
      font-family:@fontFamily400;
      font-weight:@fontWeight500;
      color:@whiteColor;
      .tabItmes{
        width:50%;
      }
      .activityCurriculum{
        background: #FEA300;
      }
    }
    .filters{
      width: 100%;
      position: relative;
      display: flex;
      border-bottom: 0.02rem solid #313131;
    }
    .courseLists{
      width:100%;
      padding:0.3rem;
      box-sizing: border-box;
      .courseList{
        width:100%;
        flex-wrap: wrap;
        .courseListItems{
          width:3.35rem;
          margin-bottom:0.06rem;
          .courseVideo{
            width:3.35rem;
            height:2.3rem;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            border-radius: 0.1rem;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: space-between;
            padding:0.18rem;
            box-sizing: border-box;
            .time{
              font-size: @fontSize26;
              font-weight: @fontWeight500;
              font-family: @fontFamily400;
              color:@whiteColor;
            }
            .pass{
              width:0.8rem;
              height:0.4rem;
              border-radius: 0.05rem;
              background: #FEA300;
              font-size: @fontSize24;
              font-weight: @fontWeight400;
              font-family: @fontFamily400;
              color:@whiteColor;
            }
          }
          .activityBorder{
            border-left:0.06rem solid #FEA300;
          }
          .courseContent{
            width:3.35rem;
            padding: 0.34rem 0;
            .title{
              width:3.35rem;
              height:0.96rem;
              font-size: @fontSize34;
              font-weight: @fontWeight600;
              font-family: @fontFamily400;
              color:@whiteColor;
              span{
                width:0.3rem;
                height: 0.3rem;
                border-radius: 0.05rem;
                background: #FEA300;
                font-size: @fontSize24;
                font-weight: @fontWeight500;
                font-family: @fontFamily400;
                color:@whiteColor;
                margin-right:0.1rem;
                padding:0.04rem;
                box-sizing: border-box;
              }
            }
            .courseType{
              font-size: @fontSize28;
              font-weight: @fontWeight400;
              font-family: @fontFamily400;
              color:rgba(255,255,255,0.8);
              margin-top: 0.1rem;
            }
            .activityWord{
              color:#FEA300;
            }
          }
        }
      }
    }
    .noData{
      width:100%;
      height: 4rem;
      font-size: @fontSize34;
      font-family: @fontFamily500;
      font-weight: @fontWeight400;
      color:@whiteColor;
    }
  }
</style>
